const ShapeSettingsTemp = `
<div class="drag-box">
    <i class="iconfont icon-uni-ketuozhuai"></i><span>draggable</span>
</div>
<div class="konva-root-shape-settings-menu-tabs">
    <span>设计</span>
    <span>属性</span>
    <span>动画</span>
</div>
<div class="konva-root-shape-settings-menu-content konva-root-overflow"></div>
`;

// 设计
const designTemp = `
<div class="design">
    <div class="items">
        <div class="title">背景设置</div>
        <div class="background">
            <select data-operator-select="fill-type">
                <option value="color">纯色填充</option>
                <option value="image">图片填充</option>
            </select>
            <input type="color" data-operator-input="fill-color" />
        </div>
        <div class="file-picker" data-operator-button="image-picker">
            <i class="iconfont icon-uni-tupiantianjia"></i>
        </div>
        <div class="apply-all" data-operator-button="apply-all">
            应用全部
        </div>
    </div>
    
    <div class="line"></div>
    <div class="items">
        <div class="title">网格设置</div>
        <div class="gridline">
            <div>
                <span>启用:</span>
                <input type="checkbox" data-operator-input="gridline-open" />
            </div>
            <div>
                <span>颜色:</span>
                <input type="color" value="#eeeeee" data-operator-input="gridline-color" />
            </div>
        </div>
    </div>
    
    <div class="line"></div>
    <div class="items">
        <div class="title">配色方案</div>
        <div class="zdycolormatch" data-operator-button="zdycolormatch"> 自定义配色 </div>
        <div class="tips-title">推荐配色</div>
        <div class="colorMatch">
        </div>
    </div>
</div>
`;

// 属性
const optionTemp = `
<div class="settings">
    <div class="items">
        <div class="title">基础属性</div>
        <div class="info">
            <div>
                <span>宽度:</span>
                <input data-operator-input="width" type="number" min="1" />
            </div>
            <div>
                <span>高度:</span>
                <input data-operator-input="height" type="number" min="1" />
            </div>
            <div>
                <span>距左:</span>
                <input data-operator-input="left" type="number" />
            </div>
            <div>
                <span>距顶:</span>
                <input data-operator-input="top" type="number" />
            </div>
            <div>
                <span>旋转:</span>
                <input disabled style="cursor:not-allowed" data-operator-input="rotate" type="number" />
            </div>
            <div>
                <span>填充:</span>
                <input data-operator-input="fill" type="color" />
            </div>
        </div>
    </div>

    <div class="line"></div>
    <div class="items">
        <div class="title">设置层级</div>
        <div class="level">
            <span data-operator-button="leveltop" class="left-border">
                <i class="iconfont icon-uni-zhiyudingceng2"></i> 置顶
            </span>
            <span data-operator-button="bottom" class="right-border">
                <i class="iconfont icon-uni-zhiyudiceng2"></i> 置底
            </span>
            <span data-operator-button="holdup" class="left-border">
                <i class="iconfont icon-uni-shangyiyiceng2"></i> 上移
            </span>
            <span data-operator-button="putdown" class="right-border">
                <i class="iconfont icon-xiayiyiceng2"></i> 下移
            </span>
        </div>
    </div>

    <div class="items">
        <div class="title">对齐方式</div>
        <div class="align">
            <span data-operator-button="horizontleft" title="左对齐" class="left-border">
                <i class="iconfont icon-uni-zuoduiqi2"></i>
            </span>
            <span data-operator-button="horizoncenter" title="水平居中">
                <i class="iconfont icon-uni-shuipingduiqi2"></i>
            </span>
            <span data-operator-button="horizonright" title="右对齐" class="right-border">
                <i class="iconfont icon-uni-youduiqi2"></i>
            </span>
            <span data-operator-button="verticaltop" title="顶对其" class="left-border">
                <i class="iconfont icon-uni-dingbuduiqi2"></i>
            </span>
            <span data-operator-button="verticalcenter" title="垂直居中">
                <i class="iconfont icon-uni-chuizhiduiqi2"></i>
            </span>
            <span data-operator-button="verticalbottom" title="底对齐" class="right-border">
                <i class="iconfont icon-uni-dibuduiqi2"></i>
            </span>
        </div>
    </div>
    <div class="line"></div>
    <div class="items">
        <div class="title">裁剪</div>
    </div>
    
    <div class="line"></div>
    <div class="items">
        <div class="title">边框</div>
        <div class="stroke">
            <div>
                <span>启用：</span>
                <input type="checkbox" data-operator-input="stroke-open" />
            </div>
            <div>
                <span>样式：</span>
                <select data-operator-select="stroke-type">
                    <option value="solid">实线</option>
                    <option value="dash">虚线</option>
                </select>
            </div>
            <div>
                <span>颜色：</span>
                <input data-operator-input="stroke-color" type="color" />
            </div>
            <div>
                <span>粗细：</span>
                <input data-operator-input="stroke-width" type="number" />
            </div>
        </div>
    </div>
    
    <div class="line"></div>
    <div class="items">
        <div class="title">文字</div>
        <div class="text">
            <div>
                <span>内容：</span>
                <input data-operator-input="text" />
            </div>
            <div>
                <span>颜色：</span>
                <input data-operator-input="text-color" type="color" />
            </div>
            <div>
                <span>字号：</span>
                <input data-operator-input="text-fontsize" type="number" />
            </div>
        </div>
    </div>
    <div class="line"></div>
    <div class="items">
        <div class="title">线段</div>
        <div class="text">
            <div>
                <span>线宽：</span>
                <input data-operator-input="line-width" type="number" />
            </div>
            <div>
                <span>颜色：</span>
                <input data-operator-input="line-color" type="color" />
            </div>
            <div>
                <span>箭头：</span>
                <input type="checkbox" data-operator-input="show-pointer" />
            </div>
        </div>
    </div>
</div>
`;

// 动画
const animationTemp = `
<div class="animation">
    <!-- 添加动画 -->
    <div class="add-animation" data-operator-button="add-animation">添加动画</div>
    <div class="animation-applylist">
        <div class="animation-applylist-option">
            <div>
                <span>触发方式:</span>
                <select data-operator-select="trigger-type">
                    <option value="click">单击时</option>
                    <option value="together">与上一个同步</option>
                    <option value="after">在上一个之后</option>
                </select>
            </div>
            <div>
                <span>持续时间:</span>
                <input type="number" value="1000" data-operator-input="animation-duration" min="0" step="500" />
            </div>
        </div>
        <div class="animation-applylist-content konva-root-overflow"> </div>
        <div class="animation-applylist-btns">
            <span class="left-border" data-operator-button="animation-apply">播放</span>
            <span class="right-border" data-operator-button="animation-preview">幻灯片预览</span>
        </div>
        
    </div>
</div>
`;

// 动画列表
const animationListTemp = `
<span class="close">&times;</span>
<div class="title">强调动画</div>
<div class="items">
    <span data-animation="animate__flash">
        <i class="iconfont icon-uni-shanshuo" style="color:#68A490"></i> 闪烁
    </span>
    <span data-animation="animate__shakeX">
        <i class="iconfont icon-uni-zhendong" style="color:#68A490"></i> 摇晃
    </span>
    <span data-animation="animate__heartBeat">
        <i class="iconfont icon-uni-fangda" style="color:#68A490"></i> 放大
    </span>
</div>
<div class="title">入场动画</div>
<div class="items">
    <span data-animation="animate__backInDown">
        <svg t="1724229315109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8935" width="200" height="200">
            <path d="M466.944 143.36c-10.24 0-18.432 8.192-18.432 18.432L446.464 491.52l2.048 325.632c0 10.24 8.192 18.432 18.432 18.432s18.432-8.192 18.432-18.432l2.048-325.632-2.048-329.728c0-10.24-8.192-18.432-18.432-18.432zM565.248 61.44c-10.24 0-18.432 8.192-18.432 18.432L544.768 450.56l2.048 362.496c0 10.24 8.192 18.432 18.432 18.432s18.432-8.192 18.432-18.432l2.048-362.496-2.048-368.64c2.048-12.288-8.192-20.48-18.432-20.48z" fill="#D8D8D8" p-id="8936"></path>
            <path d="M739.328 272.384c-73.728-6.144-149.504-10.24-225.28-10.24s-151.552 4.096-227.328 10.24c-59.392 6.144-106.496 53.248-112.64 112.64C167.936 462.848 163.84 538.624 163.84 614.4c0 73.728 4.096 149.504 10.24 223.232 6.144 59.392 53.248 106.496 112.64 112.64 73.728 6.144 149.504 10.24 225.28 10.24s151.552-4.096 227.328-10.24c59.392-6.144 106.496-53.248 110.592-112.64 6.144-73.728 10.24-147.456 10.24-223.232s-4.096-153.6-10.24-229.376c-4.096-59.392-51.2-106.496-110.592-112.64z" fill="#fff3e6" p-id="8937" data-spm-anchor-id="a313x.search_index.0.i14.24443a81suHAfC" class=""></path>
            <path d="M528.384 735.232l59.392-69.632c8.192-8.192 6.144-22.528-2.048-28.672-4.096-2.048-8.192-4.096-12.288-4.096h-116.736c-12.288 0-20.48 8.192-20.48 20.48 0 4.096 2.048 10.24 4.096 12.288l59.392 69.632c8.192 8.192 20.48 10.24 28.672 2.048-2.048 0-2.048 0 0-2.048z" fill="#FF5E00" p-id="8938" data-spm-anchor-id="a313x.search_index.0.i15.24443a81suHAfC" class="selected"></path>
            <path d="M512 653.312c12.288 0 20.48-8.192 20.48-20.48v-143.36c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48v143.36c0 10.24 8.192 20.48 20.48 20.48z" fill="#FF5E00" p-id="8939" data-spm-anchor-id="a313x.search_index.0.i16.24443a81suHAfC" class="selected"></path>
        </svg>
        落下
    </span>
    <span data-animation="animate__fadeIn">
        <svg t="1724229339132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9196" width="200" height="200">
            <path d="M808.96 284.672c6.144 73.728 10.24 149.504 10.24 225.28s-4.096 151.552-10.24 227.328c-6.144 59.392-53.248 106.496-112.64 112.64-77.824 6.144-153.6 10.24-229.376 10.24-73.728 0-149.504-4.096-223.232-10.24-59.392-4.096-106.496-51.2-110.592-110.592C126.976 663.552 122.88 587.776 122.88 512s4.096-151.552 10.24-227.328C137.216 225.28 184.32 178.176 243.712 174.08c73.728-6.144 149.504-10.24 225.28-10.24s153.6 4.096 229.376 10.24c59.392 4.096 106.496 51.2 110.592 110.592z" fill="#D8D8D8" p-id="9197"></path>
            <path d="M890.88 284.672c6.144 73.728 10.24 149.504 10.24 225.28s-4.096 151.552-10.24 227.328c-6.144 59.392-53.248 106.496-112.64 112.64-77.824 6.144-153.6 10.24-229.376 10.24-73.728 0-149.504-4.096-223.232-10.24-59.392-6.144-106.496-53.248-112.64-112.64-4.096-73.728-8.192-149.504-8.192-225.28s4.096-151.552 10.24-227.328c6.144-59.392 53.248-106.496 112.64-112.64 71.68-4.096 147.456-8.192 223.232-8.192s153.6 4.096 229.376 10.24c59.392 4.096 106.496 51.2 110.592 110.592z" fill="#fff3e6" p-id="9198" data-spm-anchor-id="a313x.search_index.0.i19.24443a81suHAfC" class=""></path>
            <path d="M497.664 436.224c8.192-8.192 24.576-4.096 28.672 2.048s6.144 10.24 6.144 14.336v116.736c0 12.288-8.192 20.48-20.48 20.48-4.096 0-10.24-2.048-12.288-4.096L430.08 526.336c-8.192-8.192-12.288-20.48-4.096-28.672 2.048-2.048 71.68-61.44 71.68-61.44z" fill="#FF5E00" p-id="9199" data-spm-anchor-id="a313x.search_index.0.i20.24443a81suHAfC" class="selected"></path>
            <path d="M512 512c0-12.288 8.192-20.48 20.48-20.48h143.36c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48h-143.36c-12.288 0-20.48-8.192-20.48-20.48z" fill="#FF5E00" p-id="9200" data-spm-anchor-id="a313x.search_index.0.i21.24443a81suHAfC" class="selected"></path>
        </svg>
        淡入
    </span>
    <span data-animation="animate__rotateIn">
        <svg t="1724229278010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8564" width="200" height="200">
            <path d="M200.704 313.344c-6.144 67.584-8.192 137.216-8.192 204.8 0 69.632 2.048 139.264 8.192 206.848 4.096 59.392 53.248 106.496 112.64 112.64 69.632 6.144 141.312 8.192 208.896 8.192s135.168-2.048 204.8-8.192c59.392-4.096 106.496-53.248 112.64-112.64 6.144-69.632 8.192-137.216 8.192-206.848s-2.048-137.216-8.192-206.848c-4.096-59.392-53.248-106.496-112.64-112.64-67.584-6.144-135.168-8.192-204.8-8.192s-139.264 2.048-208.896 8.192c-61.44 6.144-108.544 55.296-112.64 114.688z" fill="#D8D8D8" p-id="8565"></path>
            <path d="M432.128 139.264c-53.248 45.056-102.4 90.112-151.552 139.264S184.32 378.88 139.264 432.128c-38.912 45.056-38.912 112.64 0 157.696 45.056 53.248 92.16 106.496 141.312 153.6 47.104 47.104 98.304 94.208 149.504 139.264 45.056 38.912 112.64 38.912 157.696 0 53.248-45.056 104.448-92.16 151.552-139.264 49.152-49.152 96.256-100.352 139.264-151.552 38.912-45.056 38.912-112.64 0-157.696-43.008-51.2-90.112-102.4-139.264-151.552-49.152-49.152-100.352-96.256-153.6-141.312-40.96-38.912-106.496-38.912-153.6-2.048z" fill="#fff3e6" p-id="8566" data-spm-anchor-id="a313x.search_index.0.i9.24443a81suHAfC" class="selected"></path>
            <path d="M526.336 342.016c8.192-8.192 22.528-6.144 28.672 2.048 2.048 4.096 4.096 8.192 4.096 12.288v116.736c0 12.288-8.192 20.48-20.48 20.48-4.096 0-10.24-2.048-12.288-4.096L456.704 430.08c-8.192-8.192-10.24-20.48-2.048-28.672 4.096-4.096 71.68-59.392 71.68-59.392z" fill="#FF5E00" p-id="8567" data-spm-anchor-id="a313x.search_index.0.i10.24443a81suHAfC" class=""></path>
            <path d="M530.432 704.512c-83.968 0-153.6-69.632-153.6-153.6 0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48c0 61.44 51.2 112.64 112.64 112.64s112.64-51.2 112.64-112.64-51.2-112.64-112.64-112.64c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48c83.968 0 153.6 69.632 153.6 153.6s-69.632 153.6-153.6 153.6z" fill="#FF5E00" p-id="8568" data-spm-anchor-id="a313x.search_index.0.i8.24443a81suHAfC" class=""></path>
        </svg>
        旋转
    </span>
    <span data-animation="animate__zoomIn">
        <svg t="1724229457482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9880" width="200" height="200">
            <path d="M849.92 284.672c6.144 73.728 10.24 149.504 10.24 225.28s-4.096 151.552-10.24 227.328c-6.144 59.392-53.248 106.496-112.64 112.64-77.824 6.144-153.6 10.24-229.376 10.24-73.728 0-149.504-4.096-223.232-10.24-59.392-4.096-106.496-51.2-110.592-110.592C167.936 663.552 163.84 587.776 163.84 512s4.096-151.552 10.24-227.328c4.096-59.392 51.2-106.496 110.592-110.592 73.728-6.144 149.504-10.24 225.28-10.24s153.6 4.096 229.376 10.24c59.392 4.096 106.496 51.2 110.592 110.592z" fill="#D8D8D8" p-id="9881"></path>
            <path d="M788.48 309.248c6.144 67.584 10.24 135.168 10.24 202.752s-4.096 135.168-10.24 204.8c-4.096 38.912-34.816 69.632-73.728 73.728-69.632 6.144-137.216 10.24-204.8 10.24s-133.12-4.096-200.704-10.24c-38.912-4.096-69.632-34.816-73.728-73.728-6.144-69.632-10.24-137.216-10.24-204.8s4.096-135.168 10.24-202.752c4.096-38.912 34.816-69.632 73.728-73.728 65.536-6.144 133.12-10.24 200.704-10.24s137.216 4.096 204.8 10.24c38.912 2.048 71.68 34.816 73.728 73.728z" fill="#fff3e6" p-id="9882" data-spm-anchor-id="a313x.search_index.0.i31.24443a81suHAfC" class="selected"></path>
            <path d="M428.1344 320.96256c11.5712 0 20.2752 11.59168 18.82112 21.7088-1.45408 4.36224-2.90816 8.704-5.79584 11.59168l-85.44256 85.44256c-8.68352 8.68352-20.2752 8.68352-28.95872 0-2.90816-2.88768-5.79584-8.68352-5.79584-11.5712l-7.24992-91.2384c0-11.59168 7.24992-21.7088 18.8416-21.7088 14.47936 0 95.58016 5.77536 95.58016 5.77536z" fill="#FF5E00" p-id="9883" data-spm-anchor-id="a313x.search_index.0.i29.24443a81suHAfC" class=""></path>
            <path d="M384.67584 384.67584c8.68352-8.68352 20.2752-8.68352 28.95872 0l72.41728 72.41728c8.68352 8.68352 8.68352 20.2752 0 28.95872-8.68352 8.68352-20.2752 8.68352-28.95872 0l-72.41728-72.41728a20.52096 20.52096 0 0 1 0-28.95872z" fill="#FF5E00" p-id="9884" data-spm-anchor-id="a313x.search_index.0.i30.24443a81suHAfC" class=""></path>
            <path d="M596.93056 701.19424c-17.38752-2.88768-30.4128-21.7088-14.47936-34.75456l83.968-83.98848c8.704-8.704 20.2752-8.704 28.9792 0 2.90816 2.88768 5.79584 8.68352 5.79584 11.5712l7.24992 91.2384c0 11.59168-7.24992 21.7088-18.8416 21.7088-5.79584 0-92.672-5.77536-92.672-5.77536z" fill="#FF5E00" p-id="9885" data-spm-anchor-id="a313x.search_index.0.i28.24443a81suHAfC" class=""></path>
            <path d="M638.91456 638.91456c-8.68352 8.704-20.2752 8.704-28.95872 0l-72.3968-72.3968c-8.704-8.68352-8.704-20.2752 0-28.95872 8.68352-8.704 20.2752-8.704 28.95872 0l72.3968 72.3968c8.704 8.68352 8.704 20.2752 0 28.95872z" fill="#FF5E00" p-id="9886" data-spm-anchor-id="a313x.search_index.0.i27.24443a81suHAfC" class=""></path>
        </svg>
        放大
    </span>
</div>
<div class="title">退场动画</div>
<div class="items">
    <span data-animation="animate__backOutDown">
        <i class="iconfont icon-uni-24gl-ejectUp" style="color:#d86344"></i>弹出
    </span>
    <span data-animation="animate__fadeOut">
        <i class="iconfont icon-uni-danrudanchu" style="color:#d86344"></i>淡出
    </span>
    <span data-animation="animate__rotateOut">
        <i class="iconfont icon-uni-raogoujianxuanzhuan" style="color:#d86344"></i>旋转
    </span>
    <span data-animation="animate__zoomOut">
        <i class="iconfont icon-uni-suoxiao" style="color:#d86344"></i>缩小
    </span>
</div>
`;

export {
  ShapeSettingsTemp,
  designTemp,
  optionTemp,
  animationTemp,
  animationListTemp,
};
